<template>
  <div>
    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改</template>
            <el-menu-item-group>

              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>


      <el-container>
        <el-main>
          <div style="width: 80%;margin: 0 auto">
            <div  style="width:14%;height: 130px;border-radius: 100px;display:inline-block;">
              <img
                  style="width:250px;height:250px;border-radius: 50%"
                  :src="head"
                  class="image"
              >
            </div>

            <br>
            <br>
            <el-descriptions :column="1" border>

              <el-descriptions-item label="用户名" v-model="username" ><p class="message">{{username}}</p></el-descriptions-item>
              <el-descriptions-item label="邮箱号" v-model="email" class="message"><p class="message">{{email}}</p></el-descriptions-item>
              <el-descriptions-item label="个性签名" v-model="motto" class="message" ><p class="message">{{motto}}</p></el-descriptions-item>
              <el-descriptions-item label="居住地" v-model="city" class="message"><p class="message">{{city}}</p></el-descriptions-item>

            </el-descriptions>
          </div>
        </el-main>
      </el-container>

    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "showinfo",
  data(){
    return{
      head:"",
      username: "",
      email: "",
      motto: "",
      city: "",
    }

  },
  created() {
    this.showInfo()
  },
  methods:{
    showInfo:function (){

      const userInfo = user.getters.getUser(user.state());
      var userId;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userId=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/current',
        data: ({
          userID:userId,
        })
      })
            .then(res => {

              if (res.data.data) {
                this.username=res.data.data.username
                this.email=res.data.data.email
                this.motto=res.data.data.motto
                this.city=res.data.data.city
                this.head=res.data.data.avatarUrl
                if(this.head===null)
                  this.head="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              }
              else{
                this.$message.info("获取个人信息失败")
              }
            })
            .catch(err => {
              console.log(err);         /* 若出现异常则在终端输出相关信息 */
            })

    }
  }
}
</script>

<style scoped>
.message{
  width: 20em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

}
</style>
